const Vue=require('vue')
const fs=require("fs")
const express=require("express")
const {createBundleRenderer}=require("vue-server-renderer")
const setupDevServer=require("./build/setup-dev-server")



const server=express()

server.use('/dist',express.static('./dist'))


let renderer
let onReady
const isProd=process.env.NODE_ENV==="production"
if(isProd){
  const serverBundle=require("./dist/vue-ssr-server-bundle.json")
  const template=fs.readFileSync("./index.template.html","utf-8")
  const clientManifest=require("./dist/vue-ssr-client-manifest.json")
  renderer=createBundleRenderer(serverBundle,{
    template,
    clientManifest
  })
}else{
  //开发模式 => 监视打包构建 =》重新生成render渲染器
  onReady=setupDevServer(server,(serverBundle,template,clientManifest)=>{
    renderer=createBundleRenderer(serverBundle,{
      template,
      clientManifest
    })
  })

}



const render=async (req,res)=>{
  try{
    const html=await renderer.renderToString({
      title:"拉钩教育",
      meta:`
          <meta name="description" content="拉钩教育">
        `,
      url:req.url
    })
    res.setHeader("Content-Type","text/html;charset=utf8")
    res.end(html)
  }catch(err){
    console.log(err)
    res.status(500).end("Internal Server Error.")
  }
}

//服务端路由设置为* ，所有请求都进入这里
server.get("*",isProd
  ?render
  :async (req,res)=>{
    //等待有了renderder渲染器以后，调用render进行渲染
    await onReady
    render(req,res)
  }
) 

server.listen(3000,()=>{
  console.log("server running at 3000")
})
